"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Progress } from "@/components/ui/progress"
import {
  ArrowLeft,
  ArrowRight,
  Mail,
  Lock,
  Eye,
  EyeOff,
  User,
  Phone,
  Building,
  MapPin,
  Sparkles,
  Check,
  Code,
  Briefcase,
  Lightbulb,
  TrendingUp,
  Users,
  DollarSign,
} from "lucide-react"

export default function RegisterPage() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [formData, setFormData] = useState({
    // 第一步：基本信息
    name: "",
    email: "",
    phone: "",
    password: "",
    confirmPassword: "",
    agreeTerms: false,

    // 第二步：职业信息
    company: "",
    position: "",
    industry: "",
    experience: "",
    location: "",

    // 第三步：兴趣偏好
    interests: [],
    goals: [],
    newsletter: true,
  })
  const [errors, setErrors] = useState({})
  const [isLoading, setIsLoading] = useState(false)

  const steps = [
    { id: 1, title: "基本信息", description: "创建您的账户" },
    { id: 2, title: "职业信息", description: "完善个人资料" },
    { id: 3, title: "兴趣偏好", description: "个性化推荐" },
  ]

  const industries = [
    "互联网/科技",
    "金融/投资",
    "教育/培训",
    "医疗/健康",
    "电商/零售",
    "制造业",
    "房地产",
    "文娱/传媒",
    "餐饮/服务",
    "其他",
  ]

  const experiences = ["学生", "0-1年", "1-3年", "3-5年", "5-10年", "10年以上"]

  const interestOptions = [
    { id: "tech", label: "科技创新", icon: Code, color: "bg-blue-100 text-blue-700" },
    { id: "business", label: "商业模式", icon: Briefcase, color: "bg-green-100 text-green-700" },
    { id: "startup", label: "创业故事", icon: Lightbulb, color: "bg-yellow-100 text-yellow-700" },
    { id: "investment", label: "投资融资", icon: DollarSign, color: "bg-purple-100 text-purple-700" },
    { id: "marketing", label: "市场营销", icon: TrendingUp, color: "bg-red-100 text-red-700" },
    { id: "team", label: "团队管理", icon: Users, color: "bg-indigo-100 text-indigo-700" },
  ]

  const goalOptions = ["寻找创业机会", "学习创业知识", "寻找合作伙伴", "获得投资", "扩展人脉", "分享经验"]

  const handleInputChange = (field, value) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
    // 清除对应字段的错误
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: "" }))
    }
  }

  const handleInterestToggle = (interestId) => {
    setFormData((prev) => ({
      ...prev,
      interests: prev.interests.includes(interestId)
        ? prev.interests.filter((id) => id !== interestId)
        : [...prev.interests, interestId],
    }))
  }

  const handleGoalToggle = (goal) => {
    setFormData((prev) => ({
      ...prev,
      goals: prev.goals.includes(goal) ? prev.goals.filter((g) => g !== goal) : [...prev.goals, goal],
    }))
  }

  const validateStep = (step) => {
    const newErrors = {}

    if (step === 1) {
      if (!formData.name) newErrors.name = "请输入姓名"
      if (!formData.email) {
        newErrors.email = "请输入邮箱地址"
      } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
        newErrors.email = "请输入有效的邮箱地址"
      }
      if (!formData.phone) newErrors.phone = "请输入手机号"
      if (!formData.password) {
        newErrors.password = "请输入密码"
      } else if (formData.password.length < 6) {
        newErrors.password = "密码至少需要6位字符"
      }
      if (formData.password !== formData.confirmPassword) {
        newErrors.confirmPassword = "两次输入的密码不一致"
      }
      if (!formData.agreeTerms) {
        newErrors.agreeTerms = "请同意用户协议和隐私政策"
      }
    }

    if (step === 2) {
      if (!formData.industry) newErrors.industry = "请选择行业"
      if (!formData.experience) newErrors.experience = "请选择工作经验"
    }

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleNext = () => {
    if (validateStep(currentStep)) {
      setCurrentStep((prev) => prev + 1)
    }
  }

  const handlePrevious = () => {
    setCurrentStep((prev) => prev - 1)
  }

  const handleSubmit = async () => {
    if (!validateStep(currentStep)) return

    setIsLoading(true)

    try {
      // 模拟注册请求
      await new Promise((resolve) => setTimeout(resolve, 2000))

      // 注册成功，跳转到首页
      router.push("/")
    } catch (error) {
      setErrors({ general: "注册失败，请稍后重试" })
    } finally {
      setIsLoading(false)
    }
  }

  const progressPercentage = (currentStep / steps.length) * 100

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30">
      <div className="container mx-auto px-4 py-8">
        {/* 顶部导航 */}
        <div className="flex items-center justify-between mb-8">
          <Button variant="ghost" onClick={() => router.back()}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回
          </Button>
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-gradient-to-br from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
              <Sparkles className="w-5 h-5 text-white" />
            </div>
            <span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              创业者之家
            </span>
          </div>
        </div>

        <div className="max-w-2xl mx-auto">
          {/* 进度指示器 */}
          <div className="mb-8">
            <div className="flex items-center justify-between mb-4">
              {steps.map((step, index) => (
                <div key={step.id} className="flex items-center">
                  <div
                    className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
                      currentStep >= step.id ? "bg-blue-600 text-white" : "bg-slate-200 text-slate-600"
                    }`}
                  >
                    {currentStep > step.id ? <Check className="w-4 h-4" /> : step.id}
                  </div>
                  {index < steps.length - 1 && (
                    <div className={`w-16 h-0.5 mx-4 ${currentStep > step.id ? "bg-blue-600" : "bg-slate-200"}`} />
                  )}
                </div>
              ))}
            </div>
            <Progress value={progressPercentage} className="h-2" />
            <div className="mt-2 text-center">
              <h2 className="text-xl font-semibold text-slate-900">{steps[currentStep - 1].title}</h2>
              <p className="text-slate-600">{steps[currentStep - 1].description}</p>
            </div>
          </div>

          {/* 表单内容 */}
          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl">
            <CardContent className="p-8">
              {errors.general && (
                <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm mb-6">
                  {errors.general}
                </div>
              )}

              {/* 第一步：基本信息 */}
              {currentStep === 1 && (
                <div className="space-y-6">
                  <div className="text-center mb-6">
                    <h3 className="text-lg font-semibold text-slate-900 mb-2">创建您的账户</h3>
                    <p className="text-slate-600">填写基本信息开始您的创业之旅</p>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="name">姓名 *</Label>
                      <div className="relative">
                        <User className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                        <Input
                          id="name"
                          placeholder="输入您的姓名"
                          className="pl-10"
                          value={formData.name}
                          onChange={(e) => handleInputChange("name", e.target.value)}
                        />
                      </div>
                      {errors.name && <p className="text-sm text-red-600">{errors.name}</p>}
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="phone">手机号 *</Label>
                      <div className="relative">
                        <Phone className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                        <Input
                          id="phone"
                          placeholder="输入您的手机号"
                          className="pl-10"
                          value={formData.phone}
                          onChange={(e) => handleInputChange("phone", e.target.value)}
                        />
                      </div>
                      {errors.phone && <p className="text-sm text-red-600">{errors.phone}</p>}
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="email">邮箱地址 *</Label>
                    <div className="relative">
                      <Mail className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                      <Input
                        id="email"
                        type="email"
                        placeholder="输入您的邮箱"
                        className="pl-10"
                        value={formData.email}
                        onChange={(e) => handleInputChange("email", e.target.value)}
                      />
                    </div>
                    {errors.email && <p className="text-sm text-red-600">{errors.email}</p>}
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="password">密码 *</Label>
                      <div className="relative">
                        <Lock className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                        <Input
                          id="password"
                          type={showPassword ? "text" : "password"}
                          placeholder="设置密码"
                          className="pl-10 pr-10"
                          value={formData.password}
                          onChange={(e) => handleInputChange("password", e.target.value)}
                        />
                        <button
                          type="button"
                          onClick={() => setShowPassword(!showPassword)}
                          className="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-slate-600"
                        >
                          {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                        </button>
                      </div>
                      {errors.password && <p className="text-sm text-red-600">{errors.password}</p>}
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="confirmPassword">确认密码 *</Label>
                      <div className="relative">
                        <Lock className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                        <Input
                          id="confirmPassword"
                          type={showConfirmPassword ? "text" : "password"}
                          placeholder="再次输入密码"
                          className="pl-10 pr-10"
                          value={formData.confirmPassword}
                          onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
                        />
                        <button
                          type="button"
                          onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                          className="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-slate-600"
                        >
                          {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                        </button>
                      </div>
                      {errors.confirmPassword && <p className="text-sm text-red-600">{errors.confirmPassword}</p>}
                    </div>
                  </div>

                  <div className="space-y-2">
                    <div className="flex items-center space-x-2">
                      <Checkbox
                        id="agreeTerms"
                        checked={formData.agreeTerms}
                        onCheckedChange={(checked) => handleInputChange("agreeTerms", checked)}
                      />
                      <Label htmlFor="agreeTerms" className="text-sm text-slate-600">
                        我已阅读并同意
                        <Button variant="link" className="text-sm p-0 h-auto mx-1">
                          用户协议
                        </Button>
                        和
                        <Button variant="link" className="text-sm p-0 h-auto mx-1">
                          隐私政策
                        </Button>
                      </Label>
                    </div>
                    {errors.agreeTerms && <p className="text-sm text-red-600">{errors.agreeTerms}</p>}
                  </div>
                </div>
              )}

              {/* 第二步：职业信息 */}
              {currentStep === 2 && (
                <div className="space-y-6">
                  <div className="text-center mb-6">
                    <h3 className="text-lg font-semibold text-slate-900 mb-2">完善职业信息</h3>
                    <p className="text-slate-600">帮助我们更好地为您推荐相关内容</p>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="company">公司名称</Label>
                      <div className="relative">
                        <Building className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                        <Input
                          id="company"
                          placeholder="输入公司名称"
                          className="pl-10"
                          value={formData.company}
                          onChange={(e) => handleInputChange("company", e.target.value)}
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="position">职位</Label>
                      <div className="relative">
                        <User className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                        <Input
                          id="position"
                          placeholder="输入您的职位"
                          className="pl-10"
                          value={formData.position}
                          onChange={(e) => handleInputChange("position", e.target.value)}
                        />
                      </div>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label>所属行业 *</Label>
                      <Select value={formData.industry} onValueChange={(value) => handleInputChange("industry", value)}>
                        <SelectTrigger>
                          <SelectValue placeholder="选择行业" />
                        </SelectTrigger>
                        <SelectContent>
                          {industries.map((industry) => (
                            <SelectItem key={industry} value={industry}>
                              {industry}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      {errors.industry && <p className="text-sm text-red-600">{errors.industry}</p>}
                    </div>

                    <div className="space-y-2">
                      <Label>工作经验 *</Label>
                      <Select
                        value={formData.experience}
                        onValueChange={(value) => handleInputChange("experience", value)}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="选择工作经验" />
                        </SelectTrigger>
                        <SelectContent>
                          {experiences.map((exp) => (
                            <SelectItem key={exp} value={exp}>
                              {exp}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      {errors.experience && <p className="text-sm text-red-600">{errors.experience}</p>}
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="location">所在城市</Label>
                    <div className="relative">
                      <MapPin className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                      <Input
                        id="location"
                        placeholder="输入您的城市"
                        className="pl-10"
                        value={formData.location}
                        onChange={(e) => handleInputChange("location", e.target.value)}
                      />
                    </div>
                  </div>
                </div>
              )}

              {/* 第三步：兴趣偏好 */}
              {currentStep === 3 && (
                <div className="space-y-6">
                  <div className="text-center mb-6">
                    <h3 className="text-lg font-semibold text-slate-900 mb-2">选择您的兴趣</h3>
                    <p className="text-slate-600">我们将根据您的兴趣推荐相关内容</p>
                  </div>

                  <div className="space-y-4">
                    <Label>感兴趣的领域（可多选）</Label>
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                      {interestOptions.map((interest) => {
                        const Icon = interest.icon
                        const isSelected = formData.interests.includes(interest.id)
                        return (
                          <button
                            key={interest.id}
                            type="button"
                            onClick={() => handleInterestToggle(interest.id)}
                            className={`p-4 border rounded-lg flex flex-col items-center space-y-2 transition-all ${
                              isSelected ? "border-blue-500 bg-blue-50" : "border-slate-200 hover:bg-slate-50"
                            }`}
                          >
                            <div className={`p-2 rounded-lg ${interest.color}`}>
                              <Icon className="w-5 h-5" />
                            </div>
                            <span className="text-sm font-medium">{interest.label}</span>
                            {isSelected && <Check className="w-4 h-4 text-blue-600" />}
                          </button>
                        )
                      })}
                    </div>
                  </div>

                  <div className="space-y-4">
                    <Label>您的目标（可多选）</Label>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                      {goalOptions.map((goal) => {
                        const isSelected = formData.goals.includes(goal)
                        return (
                          <button
                            key={goal}
                            type="button"
                            onClick={() => handleGoalToggle(goal)}
                            className={`p-3 border rounded-lg text-left transition-all ${
                              isSelected
                                ? "border-blue-500 bg-blue-50 text-blue-700"
                                : "border-slate-200 hover:bg-slate-50"
                            }`}
                          >
                            <div className="flex items-center justify-between">
                              <span className="text-sm">{goal}</span>
                              {isSelected && <Check className="w-4 h-4" />}
                            </div>
                          </button>
                        )
                      })}
                    </div>
                  </div>

                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="newsletter"
                      checked={formData.newsletter}
                      onCheckedChange={(checked) => handleInputChange("newsletter", checked)}
                    />
                    <Label htmlFor="newsletter" className="text-sm text-slate-600">
                      订阅我们的周刊，获取最新创业资讯和活动信息
                    </Label>
                  </div>
                </div>
              )}

              {/* 按钮区域 */}
              <div className="flex justify-between pt-6 border-t">
                <Button variant="outline" onClick={handlePrevious} disabled={currentStep === 1}>
                  上一步
                </Button>

                {currentStep < steps.length ? (
                  <Button onClick={handleNext}>
                    下一步
                    <ArrowRight className="w-4 h-4 ml-2" />
                  </Button>
                ) : (
                  <Button onClick={handleSubmit} disabled={isLoading}>
                    {isLoading ? "注册中..." : "完成注册"}
                  </Button>
                )}
              </div>
            </CardContent>
          </Card>

          {/* 底部登录链接 */}
          <div className="text-center mt-6">
            <span className="text-sm text-slate-600">已有账户？</span>
            <Button variant="link" className="text-sm p-0 h-auto ml-1" onClick={() => router.push("/login")}>
              立即登录
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
